﻿<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + 	request.getServerPort() + request.getContextPath() + "/";

	/*String id=request.getParameter("id");
	String fullname=request.getParameter("fullname");
	String company=request.getParameter("company");
	String appellation=request.getParameter("appellation");
	String owner=request.getParameter("owner");
	*/

%>
<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath%>">
<meta charset="UTF-8">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>


<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

<script type="text/javascript">
	$(function(){
		$("#isCreateTransaction").click(function(){
			if(this.checked){
				$("#create-transaction2").show(200);
			}else{
				$("#create-transaction2").hide(200);
			}
		});
		$(".time").datetimepicker({
			minView: "month",
			language:  'zh-CN',
			format: 'yyyy-mm-dd',
			autoclose: true,
			todayBtn: true,
			pickerPosition: "top-left"
		});



//给放大镜图标绑定事件，用于打开搜索市场活动的模态窗口
		$("#openSearchModel").click(function () {
			$("#searchActivityModal").modal("show")
			$("#aname").keydown(function (event) {
					if(event.keyCode==13){
						//alert("执行根据名称模糊查询市场活动的操作")

						$.ajax({
							url:"/crm/clue/queryActivityByName.do",
							type:"get",
							data:{
								"name":$.trim($("#aname").val())
							},
							dataType:"json",
							success:function (resp) {
						/*
						resp
							[{市场活动1},{市场活动2},{市场活动3}]
						 */
							var html="";
								$.each(resp,function (i,n) {
									html+='<tr>';
									html+='<td><input type="radio" value="'+n.id+'" name="activity"/></td>';
									html+='<td id="'+n.id+'">'+n.name+'</td>';
									html+='<td>'+n.startDate+'</td>';
									html+='<td>'+n.endDate+'</td>';
									html+='<td>'+n.owner+'</td>';
									html+='</tr>';
								})

								$("#activityList").html(html)
							}
						})

						return false;
					}
			})
		})



//给提交绑定事件，执行市场的选择操作
		$("#submitActivityBtn").click(function () {
			//alert("事件绑定成功")
			var $radio=$("input[name=activity]:checked")
			if($radio.length==0){
				alert("请选择市场活动哦")
			}else {
				//取得选中的市场活动的id
				var id=$radio.val()
				$("#activityId").val(id)
				//alert("所选择的市场活动的id是"+id)


				//取得选中的市场活动的名称
				var activityName=$("#"+id).html()
				//alert(activityName)

				//将以上两条信息分别填入到表单的市场活动源，以及隐藏域中

				//将选中的市场活动的id填入隐藏域
				$("#activityId").val(id)
				//将选中的市场活动的名称填入市场活动源
				$("#activityName").val(activityName)



				alert("添加成功")
				//将市场活动列表清空
				$("#activityList").html("")

				//将已经选中的单选框取消选择
				$("input[name=activity]").prop("checked",false)

				//关闭搜索市场活动模态窗口
				$("#searchActivityModal").modal("hide")

			}
		})

//为转换按钮绑定事件，执行线索的转换操作
		$("#convertBtn").click(function () {
			//alert("事件绑定成功")
			/*
				提交请求到后台，执行线索的转换操作，应该发出【传统请求】，请求结束后，最终响应回到线索页

				根据‘为客户创建交易’的复选框有没有挑√，来判断是否创建交易

			 */


			if($("#isCreateTransaction").prop("checked")){
				//alert("需要创建交易")
			//如果需要创建交易，除了要给后台传递一个clueId,还需要传递金额,交易名称,预计成交日期,阶段,市场活动源
//window.location.href="workbench/clue/convert.do?clueId=${param.id}&money=xx&name=xxx&expectDate=xx&stage=xx&activityId=xx"
			//以上传递参数的方式太麻烦，而且表单一旦库充，挂载的参数就可能会突破浏览器地址栏的上限
			//所以我们想到使用提交交易表单的方式来发出本次的传统请求
		//表单方式的好处:
				//参数不需要我们手动挂载(使用name属性即可),而且表单可以发起post请求
				alert("${param.id}")
				$("#tranForm").submit()
			}else {
				//不需要创建交易时，我们只需要传递一个clueId
			alert("不需要创建交易")
				window.location.href="/crm/clue/convert.do?clueId=${pageContext.request.getParameter("id")}&flag=false"
				//alert("不需要创建交易")
				/*
				${param.id} 和  ${pageContext.request.getParameter("id")}都表示request.getParameters("id")
				 */
			}

		})

	});
//页面加载完毕分割线=================================================================================





</script>

</head>
<body>
	
	<!-- 搜索市场活动的模态窗口 -->
	<div class="modal fade" id="searchActivityModal" role="dialog" >
		<div class="modal-dialog" role="document" style="width: 90%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">搜索市场活动</h4>
				</div>
				<div class="modal-body">
					<div class="btn-group" style="position: relative; top: 18%; left: 8px;">
						<form class="form-inline" role="form">
						  <div class="form-group has-feedback">
						    <input type="text" class="form-control" id="aname" style="width: 300px;" placeholder="请输入市场活动名称，支持模糊查询">
						    <span class="glyphicon glyphicon-search form-control-feedback"></span>
						  </div>
						</form>
					</div>
					<table id="activityTable" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
						<thead>
							<tr style="color: #B3B3B3;">
								<td></td>
								<td>名称</td>
								<td>开始日期</td>
								<td>结束日期</td>
								<td>所有者</td>
								<td></td>
							</tr>
						</thead>
						<tbody id="activityList">
							<%--<tr>
								<td><input type="radio" name="activity"/></td>
								<td>发传单</td>
								<td>2020-10-10</td>
								<td>2020-10-20</td>
								<td>zhangsan</td>
							</tr>
							<tr>
								<td><input type="radio" name="activity"/></td>
								<td>发传单</td>
								<td>2020-10-10</td>
								<td>2020-10-20</td>
								<td>zhangsan</td>
							</tr>--%>
						</tbody>
					</table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="submitActivityBtn">提交</button>
				</div>
			</div>
		</div>
	</div>
<!--
	el表达式为我们提供了许多个隐含对象。
	其中之一xxxScope系列可以省略，
	除此之外其他所有隐含对象一律不能省略，但凡省略就变成了从域对象中取值
-->
	<div id="title" class="page-header" style="position: relative; left: 20px;">
		<h4>转换线索 <small>${param.fullname}${param.appelation}-${param.company}</small></h4>
	</div>
	<div id="create-customer" style="position: relative; left: 40px; height: 35px;">
		新建客户：${pageContext.request.getParameter("company")}aaaa
	</div>
	<div id="create-contact" style="position: relative; left: 40px; height: 35px;">
		新建联系人：${param.fullname}${param.appelation}sa
	</div>
	<div id="create-transaction1" style="position: relative; left: 40px; height: 35px; top: 25px;">
		<input type="checkbox" id="isCreateTransaction"/>
		为客户创建交易
	</div>
	<div id="create-transaction2" style="position: relative; left: 40px; top: 20px; width: 80%; background-color: #F7F7F7; display: none;" >
	<!--
		提交表单结果行为：
			/crm/clue/convert.do?money=xx&name=xx&expectDate=xx&stage=xx&activityId=xx
	-->
		<form id="tranForm" action="/crm/clue/convert.do" method="post">
			<!--给定一个标记，用于告知后台是否需要创建交易-->
			<input type="hidden" name="flag" value="true">
			<!--隐藏域-->
			<input type="hidden" name="clueId" value="${param.id}">
		  <div class="form-group" style="width: 400px; position: relative; left: 20px;">
		    <label for="amountOfMoney">金额</label>
		    <input type="text" class="form-control" id="amountOfMoney" name="money">
		  </div>
		  <div class="form-group" style="width: 400px;position: relative; left: 20px;">
		    <label for="tradeName">交易名称</label>
		    <input type="text" class="form-control" id="tradeName" name="name">
		  </div>
		  <div class="form-group" style="width: 400px;position: relative; left: 20px;">
		    <label for="expectedClosingDate">预计成交日期</label>
		    <input type="text" class="form-control time" id="expectedClosingDate" readonly name="expectDate">
		  </div>
		  <div class="form-group" style="width: 400px;position: relative; left: 20px;">
		    <label for="stage">阶段</label>
		    <select id="stage"  class="form-control" name="stage">
		    	<option></option>
				<c:forEach items="${applicationScope.stage}" var="s">
					<option value="${s.value}">${s.text}</option>
				</c:forEach>
		    </select>
		  </div>
		  <div class="form-group" style="width: 400px;position: relative; left: 20px;">
		    <label for="activity">市场活动源&nbsp;&nbsp;<a href="javascript:void(0);"  id="openSearchModel" style="text-decoration: none;"><span class="glyphicon glyphicon-search"></span></a></label>
		    <input type="text" class="form-control" id="activityName" placeholder="点击上面搜索" readonly>
		  </div>
			<!--隐藏域-->
			<input type="hidden" id="activityId" name="activityId">
		</form>
		
	</div>
	
	<div id="owner" style="position: relative; left: 40px; height: 35px; top: 50px;">
		记录的所有者：<br>
		<b>${param.owner}</b>
	</div>
	<div id="operation" style="position: relative; left: 40px; height: 35px; top: 100px;">
		<input class="btn btn-primary" type="button" id="convertBtn" value="转换">
		&nbsp;&nbsp;&nbsp;&nbsp;
		<input class="btn btn-default" type="button" value="取消">
	</div>
</body>
</html>